<template>
	<view class="bg_F5F5F5">
		<!-- #ifdef APP-PLUS -->
		<view class="u-h-88">

		</view>
		<!-- #endif -->
		<view class="u-rela views1">
			<view class="u-p-10 u-flex cl_FFF">
				<view class="u-w-260" @click="$u.route('/pages/home/city')">
					<u-icon name="map" size="35"></u-icon>
					<text class="u-m-l-5 u-m-r-10">{{location.name}}</text>
					<u-icon name="arrow-down" size="25"></u-icon>
				</view>
				<view class="u-w-400" @click='$u.route("/pages/home/search")'>
					<u-search border-color='#FC3533' search-icon='https://www.sqkjkj.vip/wxImg/common/img/search.png'
						placeholder="搜索感兴趣的商品" :showAction="false" v-model="keyword"></u-search>
				</view>
			</view>
			<view class="u-p-10">
				<u-swiper :list="imgList" @click="swiperUrl($event)" height="300" mode="round" indicator-pos="topRight"
					img-mode="aspectFill">
				</u-swiper>
			</view>
			<!-- 首页滚动系统消息接口 -->
			<view class="neworder u-w-710 u-auto u-p-20 u-flex u-col-top u-row-center">
				<swiper class="u-w-670 u-h-40" circular :indicator-dots="false" :autoplay="true" :interval="2000"
					:duration="1000" :vertical="true">
					<swiper-item class="u-w-670" v-for="(info,findex) in announceList" :key="findex"
						@click="$u.route(`/subcontract/mymassage/systemMessages/detail?announce_id=${info.id}`)">
						<view class="cl_676767FF u-m-l-20 u-font-22 u-flex u-row-between">
							<view class="u-w-500 text-cut">
								{{info.name}}
							</view>
							<view class='u_inline-block u-m-l-20'>{{info.create_time}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 领券中心 /大转盘/每日签到-->
		<view class="bg_FFFFFF u-p-t-20 u-p-b-20">
			<view class=" u-flex u-font-24 cl_333">
				<view class="u-w-150 u-col-center u-flex-col" @click="$u.route('/pages/home/collectCoupons')">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/home/img1.png" mode="aspectFill" width="113rpx"
						height='113rpx' shape="circle"></u-image>
					<view class="">领券中心</view>
				</view>
				<view class="u-w-150 u-col-center u-flex-col" @click="$u.route('/pages/home/bigturntable')">

					<u-image src="https://www.sqkjkj.vip/wxImg/common/home/img2.png" mode="aspectFill" width="113rpx"
						height='113rpx' shape="circle"></u-image>
					<view class="">幸运大转盘</view>
				</view>
				<!-- <view class="u-w-150 u-col-center u-flex-col" v-if="person.living_expenses!=1&&isLogin"
					@click="$u.route('/subcontract/Rechargemoney/Rechargemoney')">
					<u-image src="https://www.sqkjkj.vip/wxImg/my/img18.png" mode="aspectFill" width="113rpx"
						height='113rpx' shape="circle"></u-image>
					<view class="">生活缴费</view>
				</view> -->
				<view class="u-w-150 u-col-center u-flex-col" v-if="person.living_expenses==1&&isLogin"
					@click="handleToMer">
					<u-image src="https://www.sqkjkj.vip/wxImg/my/img18.png" mode="aspectFill" width="113rpx"
						height='113rpx' shape="circle"></u-image>
					<view class="">会员专享</view>
				</view>

				<view class="u-w-150 u-col-center u-flex-col" @click="$u.route('/pages/home/shop')" v-if="showJifen">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/home/img3.png" mode="aspectFill" width="113rpx"
						height='113rpx' shape="circle"></u-image>
					<view class="">积分商城</view>
				</view>

				<view class="u-w-150 u-col-center u-flex-col" @click="$u.route('/pages/home/Sign')">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/home/img4.png" mode="aspectFill" width="113rpx"
						height='113rpx' shape="circle"></u-image>
					<view class="">每日签到</view>
				</view>
			</view>
		</view>
		<view class="bg_FFFFFF u-p-20">
			<scroll-view scroll-x>
				<view class="u-w-700 u-flex u-font-24 cl_333  ">
					<view v-for="(c,ci) in customList" :key="ci" @click="customUrl(c)"
						class="u-w-142 u-m-r-30 u-col-center u-flex-col">
						<u-image :src="c.pic" mode="aspectFill" width="100rpx" height='100rpx' shape="circle"></u-image>
						<view class="">{{c.title}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bg_FFFFFF">
			<view class="u-p-20 u-rela ">
				<u-image src="https://www.sqkjkj.vip/wxImg/common/home/img5.png" mode="aspectFill" width="710rpx"
					height='387rpx'></u-image>
				<view class="cl_FFF u-abso u-t-22 u-l-300 u-font-20">每日优惠上新</view>
				<view class="u-abso u-t-82 u-l-180 u-font-43 u-l-s-6 cl_FFF6DFFF">平台精选好物推荐</view>
				<view @click="$u.route('/pages/home/goodShop')"
					class="u-abso cl_FFF u-font-22 u-p-4 u-w-170 u-t-138 u-b-r-12 u-l-300 bl3A_72 u_inline-block u-text-center">
					立即查看
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="u-abso u-p-l-40 u-w-660 u-t-220 u-flex  ">
					<view class="u-w-150 bg_FFFFFF u-col-center u-flex-col u-p-6 u-m-r-20 u-b-r-12"
						v-for="(item,index) in goodShop" :key="index"
						@click="$u.route('/pages/home/paymassage?num='+item.spu)" v-if="index<4">
						<u-image :src="item.imgs[0]" mode="aspectFill" width="140rpx" height='125rpx'>
						</u-image>
						<view class="cl_FC3533FF u-font-20">￥{{item.price}}</view>
					</view>
				</view>
			</view>
			<!-- 最新订单 -->
			<view class="neworder u-w-710 u-auto u-p-20 u-flex u-col-top u-row-center">
				<u-image src="https://www.sqkjkj.vip/wxImg/common/home/img8.png" mode="aspectFill" width="105rpx"
					height='26rpx'></u-image>
				<!-- <u-notice-bar :mode="vertical" :list="list1"></u-notice-bar> -->
				<swiper class="u-w-550 u-h-40" circular :indicator-dots="false" :autoplay="true" :interval="2000"
					:duration="1000" :vertical="true">
					<swiper-item class="u-w-550" v-for="(info,findex) in inform" :key="findex">
						<view class="cl_676767FF u-m-l-20 u-font-22 u-flex u-row-between">
							<view class="u-w-260 text-cut">
								{{info.name}}购买了{{info.goods_name}}
							</view>
							<view class='u_inline-block u-m-l-20 cl_FB473CFF'>￥{{info.total_amount}}</view>
							<view class='u_inline-block u-m-l-20'>{{info.time_format}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 分类商品 -->
			<view id="classId" class="u-p-20">

				<view class="" v-if="tabList">
					<u-tabs name="title" :list="tabList" :is-scroll="true" active-color="#FB473CFF"
						:current="tabCurrent" @change="tabChange">
					</u-tabs>
				</view>
				<!-- <scroll-view scroll-x class="u-w-700 u-auto u-flex">
					<view class="u-flex">
						<view class="u-w-150" v-for="(item,index) in tabList" :key="index" @click="tabChange(index)" :class="tabCurrent==index?'cl_FB473CFF':''" >
							<view :class="tabCurrent==index?'u-weight':''" class="u-w-150 text-cut ">
								{{item.title}}
							</view>
							<view  class="u-w-40 u-h-8 u-m-t-10 u-m-l-30 u-b-r-10" :class="tabCurrent==index?'bg_FF4B3B':''" >
								
							</view>
						</view>
					</view>
				</scroll-view> -->
			</view>
		</view>
		<!-- 商品信息-->
		<view class="u-p-20 u-flex u-flex-wrap">
			<block class="" v-for="(item,index) in list" :key="index">
				<view v-if="!item.is_ad" class="u-w-335 bg_FFFFFF u-m-l-10 u-m-r-10 u-m-b-20 u-b-r-16"
					style="height: 257px;overflow:hidden;" @click="payMessage(item)">
					<u-image :src="item.imgs[0]" mode="aspectFit" width="335rpx" height='306rpx'>
					</u-image>
					<view class="u-p-20">
						<view class="cl_1C1C1CFF u-weight text-cut">{{item.name}}</view>
						<view class="u-flex u-row-between u-p-t-20">
							<view class="u-flex">
								<!-- <u-image src="https://www.sqkjkj.vip/wxImg/common/home/img10.png" mode="aspectFill" width="68rpx"
									height='30rpx'></u-image> -->
								<view class="cl_FC3533FF u-font-30 u-weight">￥{{item.price}}</view>
							</view>
							<view class="cl_848484FF u-font-24">已售{{item.sales}}</view>
						</view>
						<view class="u-flex  u-p-t-20">
							<u-image :src="item.shop_logo" mode="aspectFill" width="44rpx" height='44rpx'></u-image>
							<view class="cl_848484FF u-m-l-10 u-font-20 text-cut">{{item.shopname}}</view>
						</view>
					</view>
				</view>
				<view class="u-w-335 bg_FFFFFF u-m-l-10 u-m-r-10 u-m-b-20 u-b-r-16"
					style="height: 257px;overflow: hidden;" v-else="item.is_ad">
					<!-- #ifdef MP-WEIXIN-->
					<base-ad isCustom mode="scaleToFill" :adInfo="item"></base-ad>
					<!-- #endif -->
					<!-- #ifdef APP-ANDROID || H5 -->
					<base-ad isCustom mode="scaleToFill" :adInfo="item"></base-ad>
					<!-- #endif -->
				</view>

			</block>

		</view>
		<!-- 加载更多 -->
		<u-loadmore :status="status" icon-type="circle" margin-bottom="20" />
		<view class="u-h-100">

		</view>
		<!-- 首页弹出层 -->
		<!-- <u-mask :show="show" @click="show=false">
			<view class="one u-flex-col u-row-center u-col-center u-auto u-m-t-200">
				<view class="u-m-t-150 u-auto u-font-150 u-p-r-90 cl_ffb21c u-weight">
					{{person.register_deduct}}
				</view>
				<view class="u-m-t-140 u-flex-col u-col-center">
					<view class="u-p-l-120 u-p-r-120 u-p-t-20 u-p-b-20 cl_FFF u-b-r-20 bg_FF5502FF " @click.stop="get_registe_deduct">领取</view>
					
					<view @click="show=false" class="u-m-t-30">
						<u-icon name="close-circle-fill" color="#FFF" size="100"></u-icon>
					</view>
				</view>
			</view>
		</u-mask> -->
		<custom-modal v-model="modalShow" :info="modalInfo" @onCancel="handleCancel" @onConfirm="customUrl" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import CustomModal from './custom-modal.vue'
	export default {
		components: {
			CustomModal
		},
		data() {
			return {
				modalShow: false,
				modalInfo: {},
				// 轮播图
				imgList: [],
				customList: [],
				// 消息通知参数
				announceList: [],
				inform: '',
				// 位置
				location: {
					name: '全国',
					latitude: 0,
					longitude: 0,
				},
				// 搜索
				keyword: '',
				// 筛选数据
				filterList: this.$list.filterList,
				// 商品数据
				params: {
					type: 1,
					page: 1,
					page_size: 20,
					category_id: '',
					city_code: '',
					latitude: 0,
					longitude: 0,
				},
				// 好物推荐
				goodShop: [],
				// tab切换
				tabCurrent: 0,
				tabList: [],
				// 商品列表数据
				list: [],
				status: 'loadmore',
				// 抵扣券
				show: false,
				person: {},
				isLogin: false,
				showJifen:false
			}
		},

		async onShow() {
			// uni.setStorageSync('base_url', window.location.origin)
			if (uni.getStorageSync('token')) {
				this.regcode = uni.getStorageSync('userinfo').regcode
			}
			// #ifdef H5
			if (uni.getStorageSync('location')) {
				if (uni.getStorageSync('location').name != '全国') {
					this.location = uni.getStorageSync('location')
					await this.$api.getcitycode({
						city_name: this.location.name
					}, async res => {
						if (res.data.code == 1) {
							this.params.city_code = res.data.data.city_code
						}
					})
				} else {
					this.params.city_code = ''
					this.location = uni.getStorageSync('location')
				}
			}
			this.params.longitude = this.location.longitude
			this.params.latitude = this.location.latitude
			// #endif
			// #ifdef APP-PLUS
			if (uni.getStorageSync('location')) {
				if (uni.getStorageSync('location').name != '全国') {
					this.location = uni.getStorageSync('location')
					await this.$api.getcitycode({
						city_name: this.location.name
					}, async res => {
						if (res.data.code == 1) {
							this.params.city_code = res.data.data.city_code
						}
					})
				} else {
					this.params.city_code = ''
					this.location = uni.getStorageSync('location')
				}
			}
			this.params.longitude = this.location.longitude
			this.params.latitude = this.location.latitude
			// #endif
			// #ifdef MP-WEIXIN
			if (uni.getStorageSync('location')) {
				if (uni.getStorageSync('location').name != '全国') {
					this.location = uni.getStorageSync('location')
					await this.$api.getcitycode({
						city_name: this.location.name
					}, async res => {
						if (res.data.code == 1) {
							this.params.city_code = res.data.data.city_code
						}
					})
				} else {
					this.params.city_code = ''
					this.location = uni.getStorageSync('location')
				}
			}
			this.params.longitude = this.location.longitude
			this.params.latitude = this.location.latitude
			// #endif
			if (uni.getStorageSync('updateCity')) {
				uni.removeStorageSync('updateCity')
				this.clear()
				this.home_banner()
			}
			this.like_goods()
			this.new_order_list()
			this.custom_button()
			this.conf()
			this.announce_lists()
			if (uni.getStorageSync('token')) {
				this.isLogin = true
				this.getModal()
				this.get_my_massage()
			}

		},
		async onLoad(obj) {
			if (uni.getStorageSync('token')) {
				this.isLogin = true
				this.get_my_massage()
				this.announce_type_list()
			}
			if (obj.regcode) {
				uni.setStorageSync('zcRegcode', obj.regcode)
				uni.setStorageSync('regcode', obj.regcode)
			}
			if (obj.code_id) {
				uni.setStorageSync('code_id', obj.code_id)
			}
			this.home_banner()
			this.wechatPaySwitch()
		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			// if (this.list.length >= 20) {
			this.shop_list();
			// }
		},
		onShareAppMessage() {
			return {
				title: uni.getStorageSync('conf').web_site_title,
				imageUrl: uni.getStorageSync('conf').web_site_logo,
				path: `/pages/home/home?regcode=${this.regcode}`
			}
		},
		onShareTimeline() {
			return {
				title: uni.getStorageSync('conf').web_site_title,
				imageUrl: uni.getStorageSync('conf').web_site_logo,
				path: `/pages/home/home?regcode=${this.regcode}`
			}
		},
		methods: {
			wechatPaySwitch() {
				this.$api.cardActSwitch({}, (res) => {
					console.log(res.data.data, 'cardActSwitch')
					if(res.data.code===1){
						this.showJifen = res.data.data.mall==1
					}
	
				
				})
			},
			async announce_type_list() {
				await this.$api.announce_type_list({}, res => {
					if (res.data.code == 1) {
						
						if (res.data.data.some(i => i.un_read_count > 0)) {
							this.announce_list()
						}
					}
				})
			},
			async announce_list(type) {
				await this.$api.announce_list({
					type: -1,
					page: 1,
					page_size: 20
				}, res => {
					if (res.data.code == 1) {
						const c = res.data.data.data.filter(i=>i.is_read==0)
						if(c.length){
							uni.showModal({
								title: '提示',
								content: '您当前有未读的系统消息',
								cancelText: '取消',
								confirmText: '查看详情',
								success: (s) => {
									let url = ''
									if (s.confirm) {
										this.$u.route(`/subcontract/mymassage/systemMessages/detail?announce_id=${c[0].id}`)
									} 
								}
							})
							
						}
						console.log(c)
					}
				})
			},
			handleToMer() {
				this.$api.getExclusive({}, res => {
					if (res.data.code == 1) {
						this.$u.route('/subcontract/Rechargemoney2/Rechargemoney2');
					}
				})

			},
			handleCancel() {
				this.modalShow = false
			},
			getModal() {
				this.$api.getWindow({
					type: 1
				}, (res) => {
					if (Object.keys(res.data.data).length) {
						this.modalInfo = res.data.data
						this.modalShow = true
					}

				})
			},
			// banner和分类
			async home_banner() {
				await this.$api.home_banner({}, res => {
					if (res.data.code == 1) {
						res.data.data.banner.forEach(img => {
							img.image = img.pic
						})
						this.imgList = res.data.data.banner
						res.data.data.category.unshift({
							id: '',
							pic: '',
							title: '全部商品'
						})
						setTimeout(() => {
							this.tabList = res.data.data.category
							this.tabCurrent = 0
							this.params.category_id = ''
							this.clear()
							this.shop_list()
						}, 1000)
					}
				})
			},
			async announce_lists() {
				await this.$api.announce_lists({}, res => {
					if (res.data.code == 1) {
						this.announceList = res.data.data
					}
				})
			},
			async conf() {
				await this.$api.conf({}, res => {
					if (res.data.code == 1) {
						uni.setStorageSync('conf', res.data.data)
					}
				})
			},
			async custom_button() {
				await this.$api.custom_button({}, res => {
					if (res.data.code == 1) {
						this.customList = res.data.data
					}
				})
			},
			swiperUrl(index) {
				this.customUrl(this.imgList[index])
			},
			customUrl(c) {
				if (c.url_type == 'goods_detail') {
					this.$u.route(`/pages/home/paymassage?num=${c.params.spu}`)
				} else if (c.url_type == 'goods_list') {
					this.tabCurrent = this.tabList.findIndex((t, ti) => {
						if (t.id == c.params.category_id) {
							return ti
						}
					})
					this.tabCurrent = this.tabCurrent < 0 ? 0 : this.tabCurrent
					this.params.category_id = this.tabList[this.tabCurrent].id
					uni.pageScrollTo({
						selector: '#classId',
						duration: 500
					})
					this.clear()
					this.shop_list()
				} else if (c.url_type == 'shop_detail') {
					this.$u.route(`/pages/shopmassage/shopmassage?num=${c.params.shop_id}`)
				} else if (c.url_type == 'announce_detail') {
					this.$u.route(`/subcontract/mymassage/systemMessages/detail?announce_id=${c.params.announce_id}`)
				}
			},
			// tab切换
			tabChange(index) {
				this.tabCurrent = index
				this.params.category_id = this.tabList[this.tabCurrent].id
				this.clear()
				this.shop_list()
			},
			clear() {
				this.list = [];
				this.params.page = 1;
			},
			// 获取商品列表
			async shop_list() {
				console.log('首页商品列表', this.params)
				const params = this.params
				// #ifdef MP-WEIXIN
				params.client = '小程序'
				//  #endif

				// #ifndef MP-WEIXIN
				params.client = 'app'
				// #endif
				await this.$api.shop_list(params, res => {
					console.log(res)
					if (res.data.code == 1) {
						if (res.data.data.data.length < 20) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.list = this.list.concat(res.data.data.data);
						uni.stopPullDownRefresh();
					}
				})
			},
			payMessage(item) {
				this.$u.route(`/pages/home/paymassage?num=${item.spu}`)
				uni.setStorageSync('tabCurrent', this.tabCurrent)
			},
			// 好物推荐
			async like_goods() {
				await this.$api.like_goods({
					latitude: this.location.latitude,
					longitude: this.location.longitude,
				}, res => {
					if (res.data.code == 1) {
						this.goodShop = res.data.data.data
					}
				})
			},
			// 滚动通知
			async new_order_list() {
				await this.$api.new_order_list({}, res => {
					if (res.data.code == 1) {
						this.inform = res.data.data.data
					}
				})
			},
			// 个人资料更新
			async get_my_massage() {
				await this.$api.get_my_massage({}, res => {
					if (res.data.code == 1) {
						this.person = res.data.data.data
						uni.setStorageSync('userinfo', res.data.data.data)
						// if (res.data.data.data.is_get_registe_deduct == 0) {
						// 	this.show = true
						// }
					}
				})
			},
			// 领取抵扣金
			async get_registe_deduct() {
				await this.$api.get_registe_deduct({}, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success'
						})
						this.show = false
					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5FF !important;
	}

	::v-deep(.u-tab-bar) {
		display: none;
	}

	.one {
		width: 600rpx;
		height: 730rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/home/img11.png") no-repeat;
		background-size: 100% 100%;

	}

	.two {

		width: 238rpx;
		height: 160rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/home/img13.png") no-repeat;
		background-size: 100% 100%;
	}

	.views1 {
		background: url("https://www.sqkjkj.vip/wxImg/common/img/banner.png") no-repeat;
		background-size: 100% 100%;
	}

	.neworder {
		background: url("https://www.sqkjkj.vip/wxImg/common/home/img7.png") no-repeat;
		background-size: 100% 100%;
	}

	.all {
		background: url("https://www.sqkjkj.vip/wxImg/common/home/img9.png") no-repeat;
		background-size: 100% 100%;
	}

	.bas {
		width: 406rpx;
		height: 134rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/home/img14.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: 400rpx;
		line-height: 134rpx;
		color: #DB2400;
		font-weight: bold;
		text-align: center;
	}

	.three1 {
		width: 74rpx;
		height: 160rpx;
		background: url("https://www.sqkjkj.vip/wxImg/common/home/img12.png") no-repeat;
		background-size: 100% 100%;
	}
</style>